<!-- z-paging聊天输入框 -->

<template>
	<view class="chat-input-bar-container">
		<view class="chat-input-bar">
			<view class="chat-voice">
				<image :src="require('@/pages/newMsg/common/img/send/voice.svg')"></image>
			</view>
			<view class="chat-input-container">
				<input class="chat-input" v-model="content" :cursor-spacing="cursorSpacing" confirm-type="send"
					type="text" placeholder="请输入内容" @focus="onInputFocus" @confirm="sendClick" />
			</view>
			<view class="chat-input-send" @click="sendClick">
				<text class="chat-input-send-text">发送</text>
			</view>
		</view>
		<view class="chat-tool">
			<view v-for="(item,index) in toolList" :key="index" class="file-box">
				<image :src="item.img"></image>
			</view>
		</view>
		<view class="chat-input-bar-bottom-placeholder"></view>
	</view>
</template>

<script>
	export default {
		name: "chat-input-bar",
		data() {
			return {
				content: '',
				cursorSpacing: 20,

				//底部工具
				toolList: [{
					id: 1,
					text: '相机',
					img: require('@/pages/newMsg/common/img/file/02.svg')
				}, {
					id: 2,
					text: '拍照',
					img: require('@/pages/newMsg/common/img/file/03.svg')
				}, {
					id: 3,
					text: '红包',
					img: require('@/pages/newMsg/common/img/file/04.svg')
				}],
			};
		},
		mounted() {
			// #ifndef APP-NVUE
			const query = uni.createSelectorQuery().in(this);
			query.select('.chat-input-bar-bottom-placeholder').boundingClientRect(data => {
				if (data && data.height) {
					this.cursorSpacing = data.height + 20;
				}
			}).exec();
			// #endif
		},
		methods: {
			onInputFocus() {
				// input focus的时候重新设置一下input内容以修复在微信小程序&QQ小程序中input focus后位置偏移的bug
				// #ifdef MP-WEIXIN || MP-QQ
				this.content += ' ';
				this.$nextTick(() => {
					this.content = this.content.slice(0, -1);
				})
				// #endif
			},
			sendClick() {
				if (!this.content.length) return;
				this.$emit('send', this.content);
				this.content = '';
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-input-bar {
		display: flex;
		gap: 8rpx;
		flex-direction: row;
		align-items: center;
		border-top: solid 1px #f5f5f5;
		background-color: #f8f8f8;

		padding: 10rpx 15rpx;
	}

	.chat-input-bar-bottom-placeholder {
		background-color: #f8f8f8;
		/* #ifndef APP-PLUS */
		height: env(safe-area-inset-bottom);
		/* #endif */
	}

	.chat-input-container {
		flex: 1;
		display: flex;
		/* #ifndef APP-NVUE */
		padding: 15rpx;
		/* #endif */
		/* #ifdef APP-NVUE */
		padding: 10rpx;
		/* #endif */
		background-color: white;
		border-radius: 10rpx;
	}

	.chat-input {
		flex: 1;
		font-size: 28rpx;
	}

	.chat-input-send {
		background-color: #42b983;
		margin: 10rpx 10rpx 10rpx 10rpx;
		border-radius: 14rpx;
		padding: 15rpx 30rpx;

		&:active {
			background-color: #5fc496;
		}
	}

	.chat-input-send-text {
		color: white;
		font-size: 26rpx;
	}

	.chat-voice {
		image {
			width: 64rpx;
			height: 64rpx;
			/* margin-top: 9px; */
		}
	}

	.chat-tool {
		height: 70rpx;
		flex-direction: row;
		display: flex;
		background-color: #f8f8f8;
		.file-box {
			flex: 1;
			// text-align: center;
			align-items: center;
			image {
				width: 55rpx;
				height: 55rpx;

			}
		}
	}
</style>